<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*重置*/
        html,body,ul,ul li{margin: 0;padding: 0;border:0;}
        /*布局*/
        .a{
            border-radius:30px;
            width: 0;
            height:0;
            position: absolute;
            top:0;
            left: 410px;
        }
        .a1{
            width: 0;
            height: 0;
            background-color: #00b7ee;
            border-radius:5px;
            position: absolute;
            top:0;
            left: 595px;
        }
        .a2{
            width: 0;
            height: 0;
            background-color: orange;
            border-radius:5px;
            position: absolute;
            top:350px;
            left:655px;
        }
        .a3{
            border-radius: 30px;
            height: 0;
            width: 0;
            position: absolute;
            top:170px;
            left: 770px;
            background-color: #ff49d7;
            font-size: 0;
            color: white;
            line-height: 60px;
            text-align: center;
        }
        .a4{
            border-radius: 30px;
            background-color: #ff9c2e;
            position: absolute;
            top:170px;
            left: 990px;
            height: 0;
            width: 0;
        }
        .a5{
            border-radius: 30px;
            background-color: #ff9c2e;
            position: absolute;
            top:170px;
            left: 1145px;
            height: 0;
            width: 0;
        }
    </style>
</head>
<body style="background-color: black;">
    <div id="q">
        <img src="../Photo/1.jpg" style="width: 200px;height: 400px;float: left;margin-left: 330px">
    </div>
    <div id="w">
        <img src="../Photo/2.jpg" style="width: 200px;height: 400px;float: left;margin-left: 20px">
    </div>
    <div id="e">
        <img src="../Photo/3.jpg" style="width: 200px;height: 400px;float: left;margin-left: 20px">
    </div>
    <div id="r">
        <img src="../Photo/4.jpg" style="width: 200px;height: 400px;float: left;margin-left: 20px">
    </div>
<div>
    <img src="../Photo/5.jpg" alt="" style="float: left;margin-left:330px;width: 420px;margin-top: 20px">
</div>
<div>
    <img src="../Photo/6.jpg" alt="" style="float: left;margin-left: 20px;width: 420px;margin-top: 20px">
</div>

<img src="../Photo/w.png" class="a">
<img src="../Photo/up.png" class="a1">
<img src="../Photo/down.png" class="a2">
<div class="a3">BUY</div>
<img src="../Photo/arrow.png" class="a4">
<div class="a5"></div>
<!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
    <script src="../Public/js/jquery-1.11.1.min.js"></script>
    <script src="../Public/js/jquery.easing.1.3.js"></script>
    <script>
        var q = $('#q');
        var a =$('.a');
        var w=$('#w');
        var a1=$('.a1');
        var a2=$('.a2');
        var e=$('#e');
        var a3=$('.a3');
        var r=$('#r');
        var a4=$('.a4');
        var a5=$('.a5');
        jQuery.easing.def = 'easeOutBounce';
        q.hover(function(){
            a.stop(true)
                    .animate({top:0,width:50},300)
                    .delay(0)
                    .animate({top:170,height:45},300)
        },function(){
            a.stop(true)
                    .animate({top:170,width:50,height:45},300)
                    .delay(0)
                    .animate({top:0,height:0,width:50},300)
        })

        w.hover(function(){
            a1.stop(true)
                    .animate({top:0,width:50},300)
                    .delay(0)
                    .animate({top:170,height:50},300);
            a2.stop(true)
                    .animate({top:400,width:50},300)
                    .delay(0)
                    .animate({top:170,height:50},300);
        },function(){
            a1.stop(true)
                    .animate({top:170,width:50,height:50},300)
                    .delay(0)
                    .animate({top:0,height:0,width:50},300);
            a2.stop(true)
                    .animate({top:170,width:50,height:50},300)
                    .delay(0)
                    .animate({top:400,height:0,width:50},300);
        })

        e.hover(function(){
            a3.stop(true)
                    .animate({top:170,left:770,height:60,fontSize:0},300)
                    .delay(0)
                    .animate({top:170,left:840,width:60,fontSize:25},300);
        },function(){
            a3.stop(true)
                    .animate({top:170,left:840,width:60,height:60,fontSize:25},300)
                    .delay(0)
                    .animate({top:170,left:770,height:60,width:0,fontSize:0},300);
        })

        r.hover(function(){
            a4.stop(true)
                    .animate({top:170,left:990,height:45},300)
                    .delay(0)
                    .animate({top:170,left:1040,width:45},300);
            a5.stop(true)
                    .animate({top:170,left:1195,height:45},300)
                    .delay(0)
                    .animate({top:170,left:1090,width:45},300);
        },function(){
            a4.stop(true)
                    .animate({top:170,left:1040,width:45,height:45},300)
                    .delay(0)
                    .animate({top:170,left:990,height:45,width:0},300);
            a5.stop(true)
                    .animate({top:170,left:1090,width:45,height:45},300)
                    .delay(0)
                    .animate({top:170,left:1195,height:45,width:0},300);
        })
    </script>
</body>
</html>